<template>
  <!--VantUI组件库提供的轮播图组件，可设置autoplay(自动轮播时间) indicator-color(滑块的颜色)-->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1baeae">
    <!--接收外部传入的list数组作为参数，通过v-for指令循环渲染出需要展示的图片-->
    <van-swipe-item v-for="(item, index) in list" :key="index">
      <!--每张图片会设置一个单击事件，若传入的参数中有redirectUrl跳转地址参数，就会跳转到相应的详情页面-->
      <img :src="item.carouselUrl" alt="" @click="goTo(item.redirectUrl)">
    </van-swipe-item>
  </van-swipe>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: [] //默认空数组
    }
  },
  setup() {
    //跳转方法
    const goTo = (url) => {
      window.open(url)
    }
    //返回给template使用
    return {
      goTo
    }
  }
}
</script>
<style lang='less' scoped>
  .my-swipe{
    img{
      width: 100%;
      height: 100%;
    }
  }
</style>